<template>
    <div class="Lo_account">
        <header>
        <!-- 返回 -->
        <img @click='Lo_account_back' class="Lo_account_back" src="../../../static/imgs/return.png">
        <p>我的账户</p>

    </header>

    <section>
    
        <section class="account_cent">
            <article class="left">
                <p class="one">当前余额 (元)</p>
                <p class="two">￥ 0.00</p>
                <p class="three">冻结余额  &nbsp ￥ 0.00</p>
            </article>
            <article class="right">
              <router-link tag='div' to='Lo_ac_recharge'>
                <p class="Lo_ac_to_recharge">充值</p>
              </router-link>
            </article>
        </section>
        <article class="account_change" @click='isOpen = !isOpen'>
                <p>账户明细</p>
                <img :class="{roteta:isOpen}" src="../../../static/imgs/account_down.png">
        </article>
        <div class="show" v-show='isOpen'>
            <article class="account_hide" >
                <p :class="{bule:change==x}" v-for='item,x in details' @click='cha(x)'>
                  {{item.name}}
                </p>
                
                <ul class="ul">
                    <li class="l1" :class='{bule:change==0}'></li>
                    <li class="l2" :class='{bule:change==1}'></li>
                    <li class="l3" :class='{bule:change==2}'></li>
                    <li class="l4" :class='{bule:change==3}'></li>
                    <li class="l5" :class='{bule:change==4}'></li>

                </ul>
            </article>
        </div>
        
    </section>

    </div>
</template>
<script>
    export default {
        name:'Lo_account',
        data:function(){
          return {
              details:[
                  {name:'全部',id:0},
                  {name:'充值',id:1},
                  {name:'预约',id:2},
                  {name:'打赏',id:3},
                  {name:'退款',id:4}
              ],
              change:0,
              isOpen:false
          }
        },
        methods:{
        Lo_account_back:function(){
            this.$router.go(-1)
        },
        cha (index){
          this.change = index
        }
    }
 }
</script>

<style scoped lang='less'>
.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}


header{
    background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    .PxToRem(height,88);
    .PxToRem(font-size,40);
    .Flex;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .PxToRem(width,55);
        .PxToRem(height,53);
      }
}

.account_cent{
        color:#ffffff;
        padding: 0 2%;
        .Flex;
        .PxToRem(height,450);
        background:#1cc6a3;
        article{flex:1;}
    .left{
        .one{
             .PxToRem(font-size,25);
             .PxToRem(margin-top,70);
        }
        .two{
            .PxToRem(font-size,80);
            .PxToRem(margin-top,50);
        }
        .three{
             .PxToRem(font-size,25);
             .PxToRem(margin-top,60);
        }
    }
    .right{
        p{
          .PxToRem(width,280);
          .PxToRem(height,90);
           background:#ff6600;
          .PxToRem(border-radius,50);
           text-align: center;
          .PxToRem(font-size,40);
          .PxToRem(line-height,90);
          .PxToRem(margin-top,140);
          .PxToRem(margin-left,20);
          
        }
    }
}
.account_change{
    .Flex;
    padding:3% 5%;
    border-bottom: 1px solid #ccc;
    justify-content:space-between;
      p{
        .PxToRem(font-size,40);
      }
      .roteta{
        transform:rotate(180deg);
        
      }
      img{
          .PxToRem(width,47);
          .PxToRem(height,33);
          transition: all .5s ease;
      }
      
     
}
.account_hide{
     position: relative;    
     .Flex;
     padding:3% 0;
     justify-content:space-around;
     border-bottom: 1px solid #ccc;
    .PxToRem(font-size,40);
    p{
      flex:1;
      text-align:center;
    }
    
    p.bule{
       color:#1cc6a3;
      
    }
    ul{
      position:absolute;
      bottom: 0;
      width:100%;
      li.bule{
        width:20%;
        border-bottom: 5px solid #1cc6a3;
        color:#1cc6a3;
        position:absolute;
        bottom: 0;

      }
      
      li.l2{
          margin-left:20%;
      }
      li.l3{
          margin-left:40%;
      }
      li.l4{
          margin-left:60%;
      }
      li.l5{
          margin-left:80%;
      }
    }
}



















</style>











